<template>
	<view class="u-p-l-16 u-p-r-16 u-p-t-16">
		<!-- <u-navbar title="" back-text="营业时间">
			<template #right>
				<u-button class="u-m-r-20" type="warning" size="mini" @click="addDate">添加</u-button>
			</template>
		</u-navbar> -->

		<view class="u-p-t-28 u-p-b-28 u-p-l-28">
			<u-button type="warning" size="mini" @click="addDate">添加</u-button>
		</view>
		<view class="bg-white u-p-l-18 u-p-r-18">
			<u-form>
				<u-form-item v-for="(item,index) in arr" :key="index">
					<view class="u-flex">
						<u-input v-model="item.beginHours" input-align="center" class="u-flex-1"
							@click="showFn('start',index)" placeholder="请选择开始时间" type="select"></u-input>
						<u-input v-model="item.endHours" input-align="center" class="u-flex-1"
							@click="showFn('end',index)" placeholder="请选择结束时间" type="select"></u-input>
					</view>

					<template #right>
						<u-button @click="del(index)" type="warning" size="mini"><u-icon name="minus-circle" size="32" label-color="#fff"
								label=""></u-icon></u-button>
					</template>
				</u-form-item>
			</u-form>
		</view>

		<view class="u-m-t-52">
			<u-button type="warning" @click="submit">确定</u-button>
		</view>



		<!-- 时间选择 -->
		<u-picker @confirm="conFirm" title="开始时间" v-model="startShow" mode="time" :params="params"></u-picker>
		<u-picker @confirm="endFirm" title="结束时间" v-model="endShow" mode="time" :params="params"></u-picker>

	</view>
</template>

<script setup>
	import shopApi from '@/api/shop'

	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from "vue";

	onLoad(() => {
		shopApi.getShopDetal().then(res => {
			arr.value = res.data.hours
		})
	})

	const ids = ref(0)
	const arr = ref([])
	const startShow = ref(false)
	const endShow = ref(false)
	const params = reactive({
		hour: true,
		minute: true,
	})

	function addDate() {
		arr.value.push({
			beginHours: '',
			endHours: ''
		})
	}

	function conFirm(e) {
		console.log(e);
		arr.value[ids.value].beginHours = `${e.hour}:${e.minute}`
	}

	function endFirm(e) {
		arr.value[ids.value].endHours = `${e.hour}:${e.minute}`
	}

	function showFn(type, index) {
		if (type == 'start') {
			startShow.value = true
		} else {
			endShow.value = true
		}
		ids.value = index
	}

	function del(index){
		arr.value.splice(index,1)
	}

	function submit() {
		if (arr.value.length == 0) {
			return uni.showToast({
				title: '请添加时间',
				icon: 'none'
			})
		}

	    const hasEmpty = arr.value.some((obj)=>{
			if(obj.beginHours===""){
			  return true
			}
			if(obj.endHours ===""){
			  return true
			}
		})

		console.log(hasEmpty);
		if(hasEmpty) return uni.showToast({
			title:'请填写完整',
			icon:'none'
		})

		shopApi.setPortinfo({
			hours:arr.value,
			type:3
		}).then(res=>{
			uni.showToast({
				title:res.msg
			})
		})
	}
</script>

<style>

</style>
